<template>
  <div class="container">
    <div class="header">
      <i class="icon-back"></i>
      <span class="title">帮助</span>
    </div>
    <div class="main-content">
      <div class="content-wrapper">
        <h1 class="verify-code-title">输入验证码</h1>
        <p class="phone-info">验证码已发送至 +86 </p>
        <div class="verify-code-input">
          <input type="text" maxlength="1" v-model="code1" />
          <input type="text" maxlength="1" v-model="code2" />
          <input type="text" maxlength="1" v-model="code3" />
          <input type="text" maxlength="1" v-model="code4" />
          <input type="text" maxlength="1" v-model="code5" />
          <input type="text" maxlength="1" v-model="code6" />
        </div>
        <p class="re-get-code">重新获取({{ countdown }}s)</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code1: '',
      code2: '',
      code3: '',
      code4: '',
      code5: '',
      code6: '',
      countdown: 60,
      timer: null
    };
  },
  mounted() {
    this.startCountdown();
  },
  methods: {
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
          // 这里可以添加重新获取验证码的逻辑
        }
      }, 1000);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less">
.container {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
  font-size: 16px;
  min-height: 100vh;
}
.header {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.icon-back {
  font-size: 24px;
  color: #000;
  cursor: pointer;
  &::before {
    content: "<";
  }
}
.title {
  margin-left: auto;
  font-size: 18px;
  color: #000;
}
.main-content {
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}
.content-wrapper {
  width: 100%;
  max-width: 550px;
}
.verify-code-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: left;
}
.phone-info {
  font-size: 16px;
  color: #666;
  margin-bottom: 40px;
  text-align: left;
}
.verify-code-input {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.verify-code-input input {
  width: 52px;
  height: 64px;
  border: none;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 0;
  text-align: center;
  font-size: 28px;
  outline: none;
  transition: border-color 0.3s, border-bottom-width 0.3s;
  padding-bottom: 10px; 
  
  &:focus {
    border-bottom: 2px solid #409eff;
    box-shadow: 0 2px 0 rgba(64, 158, 255, 0.2); 
  }
  
  &:not(:empty) {
    border-bottom-color: #666;
  }
}
.re-get-code {
  font-size: 16px;
  color: #999;
  text-align: left;
  
  &.active {
    color: #409eff;
    cursor: pointer;
  }
}
</style>